<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        字体图标使用场景: 主要用于网页中通用,常用的一些小图标
     -->
     <!-- 精灵图是有诸多优点的, 但是缺点很明显 -->
     <!-- 
         1.图片文件还是比较大的
         2.图片本身放大和缩小会失真
         3.一旦图片制作完成想要更换非常复杂

         此时, 有一种技术的出现很好的解决了以上问题, 就是字体图标 iconfont.
         字体图标可以为前端工程师提供一种方便高效的图标使用方式, 展示的是图标, 本质属于字体.
        -->
    <!-- 
        轻量级: 一个图标字体要比一系列的图像要小, 一旦字体加载了, 图标就会马上渲染出来, 减少了服务器请求
        灵活性: 本质其实是文字, 可以很随意的改变颜色, 产生阴影, 透明效果, 旋转等
     -->
</body>
</html>